<template>
    <div class="max-box">
        <!-- 面包屑组件 -->
        <Crumbs :img="portrait" text1="商品管理" text2="商品分类" :text3="username"/>
        <div class="commodity-classification-container">
            <div class="title">
                <h4>店铺管理</h4>
                <button type="button" class="preservation-btn" @click="classification">添加分类</button>
                <!-- <el-button type="text" class="preservation-btn" @click="dialogFormVisible = true">添加分类</el-button> -->
            </div>
            <div class="commodity-classification-content">
                <el-table
                ref="singleTable"
                :data="tableData"
                highlight-current-row
                style="width: 100%">
                    <el-table-column
                    type="index"
                    label="序号"
                    width="120">
                    </el-table-column>
                        <el-table-column
                        label="分类名称"
                        width="260">
                        <template slot-scope="obj">
                            <el-input v-model="obj.row.cateName" v-if="obj.row.isedit"></el-input>
                            <label v-else >{{obj.row.cateName}}</label>
                        </template>
                        </el-table-column>
                    <el-table-column
                    label="是否启用"
                    width="300">
                        <template slot-scope="obj">
                            <el-switch
                            v-model="obj.row.state"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :disabled="!obj.row.isedit">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                    label="操作"
                     width="300">
                    <template slot-scope="obj">
                        <el-button type="primary" @click="editSort(obj.row)" v-if="!obj.row.isedit">编辑</el-button>
                        <el-button type="success"  @click="complete(obj.row)" v-else>完成</el-button>
                        <el-button type="danger" @click="handleDelete(obj.$index)" >删除</el-button>
                     </template>
                    </el-table-column>
                </el-table>


                <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
                        <el-form :model="form">
                            <el-form-item label="分类名称" :label-width="formLabelWidth" >
                                <el-input v-model="form.name" autocomplete="off" placeholder="分类名称" clearable></el-input>
                            </el-form-item>
                            <p class="is-enable">
                                是否启用
                                <el-switch
                                v-model="value1"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                >
                                </el-switch>
                            </p>
                            
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="clickConfirm">确 定</el-button>
                        </div>
                    </el-dialog>
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="curchange"
                    :page-sizes="[5, 8, 10, 12]"
                    :page-size="pagesize"
                    layout="total,sizes,prev, pager, next, jumper"
                    :total="total">
                    </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import Crumbs from "../../components/Crumbs"
    import {addSort,obtainSort,delSort,modifySort} from "@/apis/api"
    let imgUrl=window.localStorage.getItem("imgUrl")
    let account=window.localStorage.getItem("account")
export default {
    components:{
        Crumbs
    },
    data(){
        return{
            portrait:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4026288789,3199091819&fm=26&gp=0.jpg",
            username:"",
            tableData: [],
            value: true,
            value1: true,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formLabelWidth: '120px',
            dialogFormVisible: false,
            pagesize:5,
            curchange:1,
            total:0,
            ID:0
        }
    },
     created(){
      this.portrait=imgUrl
      this.username=account
      this.gainSort()
    },
    methods:{
        classification(){
            this.dialogFormVisible=true
            // console.log(this.value1)
        },
        //添加商品分类
        clickConfirm(){
             this.dialogFormVisible=false
            addSort({
                cateName:this.form.name,
                state:this.value1
            })
            .then(res=>{
                if(res.data.code===0){
                     console.log(res.data)
                     this.$message(res.data.msg);
                }
            })
        },
        //获取商品分类
        gainSort(){
            obtainSort({
                currentPage:this.curchange,
                pageSize:this.pagesize
            })
            .then(res=>{
                console.log(res.data)
                for(let obj of res.data.data){
                    obj.state=obj.state==1
                    obj.isedit = false; //当前数据是否点击了编辑
                }
                this.tableData=res.data.data
                this.total=res.data.total
            })
        },
        //当前页数据条数
        handleSizeChange(val1){
            console.log(val1)
            this.pagesize=val1
            this.gainSort()

        },
        //当前页码大小
        handleCurrentChange(val2){
            console.log(val2)
            this.curchange=val2
            this.gainSort()
        },
        //删除分类
        handleDelete(index){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '小猪猪烤肉提醒您', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    delSort({
                        id:this.tableData[index].id
                    })
                    .then(res=>{
                        console.log(res.data)
                         this.gainSort()
                    })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
        },
        //编辑分类
        editSort(row){
           row.isedit=true
        },
        //完成编辑
        complete(row){
            row.isedit = false;
            modifySort(
                row
            )
            .then(res=>{
                console.log(res.data)
                if(res.data.code===0){
                    this.gainSort()
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                        });
                }else{
                    this.$message.error('修改失败')
                }
            })
        },
    }
}
</script>

<style lang=less scoped>
    .max-box{
        width:100%;
        height:100%;
        display:flex;
        flex-direction: column;
    }
    .commodity-classification-container{
        flex:1;
        overflow:scroll;
        margin:20px;
        padding:10px;
        background-color:#fff;
      .title{
          display:flex;
          h4{
           margin-bottom:15px;
            padding-bottom:10px;
            border-bottom:1px solid #eee;
            flex:1;
      }
      .preservation-btn{
              margin-right:30px;
              display:block;
              width:70px;
              height:30px;
              color:#fff;
              background-color:cornflowerblue;
              outline: none;
              border-radius: 5px;
              border:0;
              cursor: pointer;
          }
    }
    .el-button{
        width:70px;
    }
    .el-input{
        height:25px;
        width:250px;
    }
    .is-enable{
        padding-left:50px;
        .el-switch{
            margin-left:10px;
        }
    }
    .el-pagination{
        margin-top:15px;
    }
    
  }
</style>